<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家装无忧 - 装修DNA测评</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #2e7d32;
            --primary-light: #4caf50;
            --primary-dark: #1b5e20;
            --secondary-color: #f5f5f5;
            --text-dark: #333;
            --text-light: #666;
            --border-radius: 16px;
            --shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            --glass-bg: rgba(255, 255, 255, 0.92);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Noto Sans SC', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
            min-height: 100vh;
            padding: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--text-dark);
        }
        
        .app-container {
            width: 100%;
            max-width: 480px;
            background: var(--glass-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 5px;
        }
        
        .header p {
            font-size: 16px;
            opacity: 0.9;
            margin: 0;
        }
        
        .page {
            padding: 20px 15px;
            display: none;
        }
        
        .active-page {
            display: block;
        }
        
        .page-title {
            text-align: center;
            margin-bottom: 15px;
        }
        
        .page-title h2 {
            font-size: 20px;
            color: var(--primary-dark);
            margin-bottom: 10px;
        }
        
        .btn {
            display: block;
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            margin-top: 15px;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(46, 125, 50, 0.4);
        }
        
        .instructions {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .instruction-card {
            display: flex;
            align-items: flex-start;
            background: var(--glass-bg);
            border-radius: var(--border-radius);
            padding: 15px;
            box-shadow: 0 4px 12px rgba(46, 125, 50, 0.15);
        }
        
        .instruction-icon {
            background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
            color: white;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            margin-right: 12px;
            box-shadow: 0 4px 10px rgba(46, 125, 50, 0.3);
            flex-shrink: 0;
        }
        
        .instruction-content h3 {
            font-size: 16px;
            margin-bottom: 6px;
            color: var(--primary-dark);
        }
        
        .instruction-content p {
            color: var(--text-light);
            line-height: 1.5;
            font-size: 14px;
        }
        
        .question-container {
            margin-bottom: 20px;
            background: var(--glass-bg);
            border-radius: var(--border-radius);
            padding: 15px;
            box-shadow: 0 4px 12px rgba(46, 125, 50, 0.15);
        }
        
        .question-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--primary-dark);
            line-height: 1.4;
        }
        
        .question-info {
            background: rgba(76, 175, 80, 0.1);
            border-radius: 8px;
            padding: 8px 12px;
            margin: 8px 0;
            font-size: 13px;
            color: var(--primary-dark);
            text-align: center;
        }
        
        .options-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            margin-top: 12px;
            margin-bottom: 12px;
        }
        
        @media (min-width: 400px) {
            .options-container {
                grid-template-columns: 1fr 1fr;
            }
        }
        
        .option-card {
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            padding: 14px 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: white;
            font-size: 14px;
            line-height: 1.4;
            text-align: center;
            position: relative;
            min-height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .option-card:hover {
            border-color: var(--primary-light);
            background: rgba(76, 175, 80, 0.05);
        }
        
        .option-card.selected {
            border-color: var(--primary-color);
            background: rgba(46, 125, 50, 0.08);
        }
        
        .option-card.selected::after {
            content: "✓";
            position: absolute;
            top: -10px;
            right: -10px;
            background: var(--primary-color);
            color: white;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            font-size: 14px;
        }
        
        .progress-container {
            margin: 12px 0 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .progress-text {
            font-size: 13px;
            color: var(--text-light);
            white-space: nowrap;
        }
        
        .progress-bar {
            flex-grow: 1;
            height: 8px;
            background: #e0e0e0;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-light), var(--primary-color));
            border-radius: 4px;
            transition: width 0.6s ease;
        }
        
        .result-container {
            text-align: center;
            margin-bottom: 20px;
        }
        
        .persona-display {
            font-size: 24px;
            font-weight: 800;
            color: var(--primary-color);
            margin: 20px 0;
            padding: 15px;
            background: rgba(46, 125, 50, 0.1);
            border-radius: var(--border-radius);
        }
        
        .chart-container {
            height: 280px;
            margin: 20px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background: var(--glass-bg);
            border-radius: var(--border-radius);
            padding: 12px;
            box-shadow: 0 4px 12px rgba(46, 125, 50, 0.15);
        }
        
        .result-description {
            background: var(--glass-bg);
            padding: 20px;
            border-radius: var(--border-radius);
            text-align: left;
            margin: 20px 0;
            box-shadow: 0 4px 12px rgba(46, 125, 50, 0.15);
        }
        
        .result-description h3 {
            color: var(--primary-dark);
            margin-bottom: 12px;
            font-size: 18px;
            text-align: center;
        }
        
        .result-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
            margin-top: 15px;
        }
        
        @media (min-width: 480px) {
            .result-grid {
                grid-template-columns: 1fr 1fr;
            }
        }
        
        .result-item {
            padding: 15px;
            background: rgba(240, 249, 240, 0.7);
            border-radius: var(--border-radius);
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            border: 1px solid rgba(224, 240, 224, 0.8);
        }
        
        .result-item h4 {
            color: var(--primary-color);
            margin-bottom: 10px;
            font-size: 15px;
            display: flex;
            align-items: center;
        }
        
        .result-item h4 i {
            margin-right: 8px;
            font-size: 16px;
        }
        
        .result-item p {
            color: var(--text-light);
            line-height: 1.5;
            font-size: 13px;
        }
        
        .footer {
            text-align: center;
            padding: 12px;
            color: var(--text-light);
            font-size: 11px;
            border-top: 1px solid rgba(0,0,0,0.05);
        }
        
        .nav-buttons {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }
        
        .nav-buttons .btn {
            flex: 1;
            padding: 12px;
            margin-top: 0;
        }
        
        .feature-list {
            padding-left: 0;
            margin: 10px 0;
            list-style-type: none;
        }
        
        .feature-list li {
            margin-bottom: 8px;
            line-height: 1.5;
            display: flex;
            align-items: center;
            font-size: 13px;
        }
        
        .feature-list li:before {
            content: "•";
            margin-right: 8px;
            color: var(--primary-color);
            font-size: 18px;
            font-weight: bold;
        }
        
        /* 手机端柱形图优化 */
        @media (max-width: 480px) {
            .chart-container {
                height: 250px;
                padding: 10px;
            }
            
            #bar-chart {
                max-width: 100%;
                max-height: 100%;
            }
            
            .persona-display {
                font-size: 20px;
                padding: 12px;
            }
            
            .result-description {
                padding: 15px;
            }
            
            .result-item {
                padding: 12px;
            }
        }
        
        /* 非常小的屏幕优化 */
        @media (max-width: 350px) {
            .header h1 {
                font-size: 24px;
            }
            
            .header p {
                font-size: 14px;
            }
            
            .page-title h2 {
                font-size: 18px;
            }
            
            .chart-container {
                height: 220px;
            }
            
            .options-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <div class="header">
            <h1>家装无忧</h1>
            <p>装修DNA测评</p>
        </div>
        
        <!-- 测试说明页面 -->
        <div id="instructions-page" class="page active-page">
            <div class="page-title">
                <h2>测试说明</h2>
            </div>
            
            <div class="instructions">
                <div class="instruction-card">
                    <div class="instruction-icon">
                        <i class="fas fa-clipboard-list"></i>
                    </div>
                    <div class="instruction-content">
                        <h3>测试规则</h3>
                        <p>根据你的直觉选择，每题至少选一项，最多选三项</p>
                    </div>
                </div>
                
                <div class="instruction-card">
                    <div class="instruction-icon">
                        <i class="fas fa-flask"></i>
                    </div>
                    <div class="instruction-content">
                        <h3>科学分析</h3>
                        <p>本测试共20题，基于决策心理学和装修行业大数据分析</p>
                    </div>
                </div>
                
                <div class="instruction-card">
                    <div class="instruction-icon">
                        <i class="fas fa-search-location"></i>
                    </div>
                    <div class="instruction-content">
                        <h3>精准匹配</h3>
                        <p>自动生成答案精准定位匹配适合你的装修类型</p>
                    </div>
                </div>
            </div>
            
            <button id="start-test-btn" class="btn">开始测评</button>
        </div>
        
        <!-- 测试题目页面 -->
        <div id="test-page" class="page">
            <div class="question-container">
                <div class="question-title" id="question-text">1. 选装修公司最看重什么？</div>
                
                <div class="question-info">请至少选择一项，最多选择三项</div>
                
                <div class="progress-container">
                    <div class="progress-text">进度: <span id="progress-text">1/20</span></div>
                    <div class="progress-bar">
                        <div class="progress-fill" id="progress-fill" style="width: 5%"></div>
                    </div>
                </div>
                
                <div class="options-container" id="options-container">
                    <div class="option-card" data-value="A">
                        <span>报价实在清晰，东西实用</span>
                    </div>
                    <div class="option-card" data-value="B">
                        <span>设计效果好看并能还原落地</span>
                    </div>
                    <div class="option-card" data-value="C">
                        <span>有专人全程对接管理，服务到位</span>
                    </div>
                    <div class="option-card" data-value="D">
                        <span>施工规范透明，队伍专业</span>
                    </div>
                </div>
            </div>
            
            <div class="nav-buttons">
                <button id="prev-btn" class="btn">上一题</button>
                <button id="next-btn" class="btn">下一题</button>
            </div>
        </div>
        
        <!-- 结果页面 -->
        <div id="results-page" class="page">
            <div class="page-title">
                <h2>测评结果</h2>
            </div>
            
            <div class="result-container">
                <div class="persona-display" id="persona-display">细节控</div>
                
                <div class="chart-container">
                    <canvas id="bar-chart"></canvas>
                </div>
                
                <div class="result-description" id="result-description">
                    <h3>您的装修DNA分析</h3>
                    <div class="result-grid">
                        <div class="result-item">
                            <h4><i class="fas fa-cogs"></i> 决策维度</h4>
                            <p id="dimension">品质严控型</p>
                        </div>
                        <div class="result-item">
                            <h4><i class="fas fa-user-tag"></i> 人物特征</h4>
                            <ul class="feature-list" id="characteristics">
                                <li>讲究品质，注重安心</li>
                                <li>对细节瑕疵无法容忍</li>
                                <li>宁可多花钱也不要将就</li>
                                <li>口头禅："要用十几年呢，不能马虎"</li>
                            </ul>
                        </div>
                        <div class="result-item">
                            <h4><i class="fas fa-handshake"></i> 适配装企</h4>
                            <p id="companies">高端施工公司、高端全案公司</p>
                        </div>
                        <div class="result-item">
                            <h4><i class="fas fa-exclamation-triangle"></i> 签约雷区</h4>
                            <p id="pitfalls">工艺缩水风险、材料偷换问题、环保不达标风险</p>
                        </div>
                        <div class="result-item">
                            <h4><i class="fas fa-search"></i> 考察重点</h4>
                            <ul class="feature-list" id="key-focus">
                                <li>关键工艺样板展示 & 工人认证</li>
                                <li>材料入场验收与溯源验证流程</li>
                                <li>保修条款与快速响应</li>
                            </ul>
                        </div>
                        <div class="result-item">
                            <h4><i class="fas fa-lightbulb"></i> 综合报告</h4>
                            <p id="report-text">根据您的选择，您属于品质严控型装修决策者。您非常注重装修质量和细节处理，对材料和工艺有较高要求。建议您在选择装修公司时重点关注关键工艺样板展示和工人认证，同时注意材料入场验收与溯源验证流程，以确保装修质量达到您的标准。</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="nav-buttons">
                <button id="restart-btn" class="btn">重新测试</button>
            </div>
        </div>
        
        <div class="footer">
            © 2025 专业家装服务系统 / 保护知识产权 . 盗版必究
        </div>
    </div>

    <script>
        // 题目数据
        const questions = [
            "1. 选装修公司最看重什么？",
            "2. 购买主材首先考虑什么？",
            "3. 看到优惠活动第一反应？",
            "4. 装修前做功课最关注什么？",
            "5. 装修中最担心的问题是？",
            "6. 厨房设计最关键的是什么？",
            "7. 装修中要加钱会怎么做？",
            "8. 到施工现场如何监督？",
            "9. 竣工验收最关注什么？",
            "10. 心仪物品超预算怎么办？",
            "11. 装修最值得花钱的地方？",
            "12. 如果总价偏高怎么办？",
            "13. 定制柜安装有误差怎么办？",
            "14. 工长推荐高价材料怎么办？",
            "15. 验房有小瑕疵怎么办？",
            "16. 项目经理临时换人关心什么？",
            "17. 水电排布不合理怎么办？",
            "18. 装修尾声增加保洁服务怎么选？",
            "19. 结算尾款前会做什么？",
            "20. 装修结束后最期待什么？"
        ];
        
        // 选项数据
        const options = [
            [
                { value: "A", text: "报价实在清晰，东西实用" },
                { value: "B", text: "设计效果好看并能还原落地" },
                { value: "C", text: "有专人全程对接管理，服务到位" },
                { value: "D", text: "施工规范透明，队伍专业" }
            ],
            [
                { value: "A", text: "总价严格控制在预算之内" },
                { value: "B", text: "颜色、花纹、质感都很喜欢" },
                { value: "C", text: "包安装包售后，方便省事" },
                { value: "D", text: "品牌过硬，质量放心" }
            ],
            [
                { value: "A", text: "仔细核算是否真划算" },
                { value: "B", text: "趁机买点好看装饰品" },
                { value: "C", text: "优先考虑一站式的套餐服务" },
                { value: "D", text: "看清规则限制再决定" }
            ],
            [
                { value: "A", text: "各种材料大概价格与避坑" },
                { value: "B", text: "收集各种喜欢的参考图" },
                { value: "C", text: "寻找口碑好的全包公司" },
                { value: "D", text: "研究合同条款和验收标准" }
            ],
            [
                { value: "A", text: "总预算严重超支" },
                { value: "B", text: "最终效果不符预期" },
                { value: "C", text: "施工进度管理混乱" },
                { value: "D", text: "隐蔽工程做不好，后期维修" }
            ],
            [
                { value: "A", text: "动线合理，方便实用" },
                { value: "B", text: "氛围舒适，美观好看" },
                { value: "C", text: "容易清洁、耐脏污" },
                { value: "D", text: "电器配置完善，五金经久耐用" }
            ],
            [
                { value: "A", text: "核实加价原因及合理性" },
                { value: "B", text: "特别好看又实用可以考虑" },
                { value: "C", text: "听设计师或朋友的意见" },
                { value: "D", text: "按合同办，必须符合规定" }
            ],
            [
                { value: "A", text: "核对材料品牌及用量" },
                { value: "B", text: "检查成品效果是否满意" },
                { value: "C", text: "主要依赖监理或项目经理管理" },
                { value: "D", text: "抽查施工细节与规范" }
            ],
            [
                { value: "A", text: "费用结算是否准确合理" },
                { value: "B", text: "整体效果好不好看" },
                { value: "C", text: "流程是否顺利，能否按时入住" },
                { value: "D", text: "边角收口、安装等细节做工" }
            ],
            [
                { value: "A", text: "果断放弃或找实惠的替代品" },
                { value: "B", text: "喜欢最重要，调整预算买下" },
                { value: "C", text: "谈折扣或分期购买" },
                { value: "D", text: "确认长期价值（质保售后）再决定" }
            ],
            [
                { value: "A", text: "基础硬装要扎实（水电/防水）" },
                { value: "B", text: "提升视觉效果的核心部位" },
                { value: "C", text: "智能家居提升便利性" },
                { value: "D", text: "环保达标与健康安全" }
            ],
            [
                { value: "A", text: "逐项审核单价及合理性" },
                { value: "B", text: "确认是否为达到效果的必要花费" },
                { value: "C", text: "协商多送服务或小家电" },
                { value: "D", text: "核对工程量与图纸是否一致" }
            ],
            [
                { value: "A", text: "沟通责任与扣款补偿" },
                { value: "B", text: "商量解决办法不能影响整体美观" },
                { value: "C", text: "只要问题不大就没关系" },
                { value: "D", text: "找出原因并要求返工重做" }
            ],
            [
                { value: "A", text: "比价确认合理性" },
                { value: "B", text: "关键是效果怎么样" },
                { value: "C", text: "信任工长的专业经验" },
                { value: "D", text: "检查材料品质怎么样" }
            ],
            [
                { value: "A", text: "要求修复并核算赔偿费用" },
                { value: "B", text: "家具能遮住就算了" },
                { value: "C", text: "要求尽快修复" },
                { value: "D", text: "全面检查有无其他隐患" }
            ],
            [
                { value: "A", text: "后续费用和用料标准是否一致" },
                { value: "B", text: "新来的懂不懂我要的风格" },
                { value: "C", text: "确保交接顺利避免延期" },
                { value: "D", text: "确认接替人能力水平" }
            ],
            [
                { value: "A", text: "现场测量实算费用" },
                { value: "B", text: "关心对完成效果有没有影响" },
                { value: "C", text: "交由监理协调处理" },
                { value: "D", text: "按图纸规范要求整改" }
            ],
            [
                { value: "A", text: "自己动手或找熟人更省钱" },
                { value: "B", text: "确保最终效果完美无瑕" },
                { value: "C", text: "选装修公司套餐省事" },
                { value: "D", text: "写进合同明确标准" }
            ],
            [
                { value: "A", text: "逐项核查材料及人工" },
                { value: "B", text: "确认设计效果是否落地" },
                { value: "C", text: "验收无重大问题即付款" },
                { value: "D", text: "复测关键项目与记录" }
            ],
            [
                { value: "A", text: "终于能安心住进去了" },
                { value: "B", text: "拍好看照片收获朋友点赞" },
                { value: "C", text: "不用再操心装修琐事" },
                { value: "D", text: "房子经久耐用质量可靠" }
            ]
        ];
        
        // 类型描述数据
        const typeDescriptions = {
            "A": {
                dimension: "理智务实型",
                persona: "省钱小能手",
                characteristics: [
                    "不花冤枉钱，只买必需的",
                    "生活节俭，讲究实用",
                    "拒绝'智商税'，不当冤大头",
                    "口头禅：'别整虚的，实用最重要'"
                ],
                companies: "工长直管型、套餐整装公司",
                pitfalls: "低价诱导性漏项、套餐外增项失控、模糊收费条款",
                keyFocus: [
                    "工长采购权透明度 & 成本控制力",
                    "闭口合同覆盖范围 & 增项清单确认",
                    "分阶段验收付款比例 & 扣款细则"
                ],
                report: "根据您的选择，您属于理智务实型装修决策者。您在装修过程中最关注的是预算控制和实用性，倾向于选择性价比高的方案。建议您在选择装修公司时重点关注工长采购权透明度 & 成本控制力，同时注意闭口合同覆盖范围 & 增项清单确认，以避免预算超支和额外费用。"
            },
            "B": {
                dimension: "视觉导向型",
                persona: "颜值即正义",
                characteristics: [
                    "为心动设计豪爽买单",
                    "坚信'好看比好用重要'",
                    "受不了土气风格",
                    "口头禅：'不好看住着难受啊'"
                ],
                companies: "设计工作室+施工、软装公司",
                pitfalls: "设计图与实景差异、软装代购隐性溢价、网红材料供应风险",
                keyFocus: [
                    "设计师落地能力 & 过往实景案例",
                    "材料小样现场对比 & 效果验证",
                    "软装组合报价陷阱 & 自主采购权"
                ],
                report: "根据您的选择，您属于视觉导向型装修决策者。您非常注重装修的美观性和设计感，愿意为视觉效果投入更多资源。建议您在选择装修公司时重点关注设计师落地能力 & 过往实景案例，同时注意材料小样现场对比 & 效果验证，以确保最终效果符合您的预期。"
            },
            "C": {
                dimension: "省心便利型",
                persona: "甩手掌柜",
                characteristics: [
                    "能躺着就不站着",
                    "怕麻烦，最讨厌操心",
                    "服务到位就痛快付钱",
                    "口头禅：'别问我，找负责人'"
                ],
                companies: "套餐整装公司、高端全案公司",
                pitfalls: "项目经理过载管理、隐蔽工程验收缺失、无延期追责条款",
                keyFocus: [
                    "管家服务响应机制 & 专属性",
                    "延期赔付条款细则 & 执行门槛",
                    "第三方监理接入权 & 协同机制"
                ],
                report: "根据您的选择，您属于省心便利型装修决策者。您希望在装修过程中尽量减少自己的参与度，更倾向于选择全包服务。建议您重点关注管家服务响应机制 & 专属性，同时仔细审查延期赔付条款细则 & 执行门槛，以确保装修过程顺利无忧。"
            },
            "D": {
                dimension: "品质严控型",
                persona: "细节控",
                characteristics: [
                    "讲究品质，注重安心",
                    "对细节瑕疵无法容忍",
                    "宁可多花钱也不要将就",
                    "口头禅：'要用十几年呢，不能马虎'"
                ],
                companies: "高端施工公司、高端全案公司",
                pitfalls: "工艺缩水风险、材料偷换问题、环保不达标风险",
                keyFocus: [
                    "关键工艺样板展示 & 工人认证",
                    "材料入场验收与溯源验证流程",
                    "保修条款与快速响应"
                ],
                report: "根据您的选择，您属于品质严控型装修决策者。您非常注重装修质量和细节处理，对材料和工艺有较高要求。建议您在选择装修公司时重点关注关键工艺样板展示 & 工人认证，同时注意材料入场验收与溯源验证流程，以确保装修质量达到您的标准。"
            }
        };
        
        // 组合类型描述
        const comboDescriptions = {
            "AB": {
                dimension: "预算+视觉",
                persona: "精明美学家",
                characteristics: [
                    "既要省钱又要漂亮",
                    "钱花刀刃上",
                    "关键地方显档次",
                    "口头禅：'这里用贵的，其他地方省点'"
                ],
                companies: "套餐整装公司(设计升级)",
                pitfalls: "套餐材料降级、增项模糊定价、设计师拿回扣",
                keyFocus: [
                    "套餐内可选材料范围 & 加价规则",
                    "设计还原度保障与灵活应变成本",
                    "效果图关键部位材质标注"
                ],
                report: "根据您的选择，您同时具备理智务实型和视觉导向型特质。您希望在预算范围内实现最佳视觉效果，对性价比有很高要求。建议您选择有设计实力的整装公司，重点关注套餐内可选材料范围 & 加价规则，同时注意设计还原度保障与灵活应变成本，确保在预算内实现满意的视觉效果。"
            },
            "AC": {
                dimension: "预算+省心",
                persona: "精算小当家",
                characteristics: [
                    "大事不糊涂小事不想管",
                    "找专业人办专业事，但钱得清楚",
                    "尽量别烦我",
                    "口头禅：'包出去可以，但别糊弄我'"
                ],
                companies: "平台整合型(设计+施工)",
                pitfalls: "套餐材料降级、增项模糊定价、托管金超期释放",
                keyFocus: [
                    "'一口价'套餐的边界定义 & 超限成本",
                    "预算控制责任人 & 增项审批流程",
                    "主材代购的性价比对比 & 退换流程"
                ],
                report: "根据您的选择，您同时具备理智务实型和省心便利型特质。您希望在省心的同时确保物有所值，对服务质量和成本控制都有要求。建议您选择服务透明的平台整合型公司，重点关注'一口价'套餐的边界定义 & 超限成本，同时注意预算控制责任人 & 增项审批流程，确保装修过程既省心又经济。"
            },
            "AD": {
                dimension: "预算+品质",
                persona: "性价比质检员",
                characteristics: [
                    "大钱要省，小钱要精",
                    "自学验收标准",
                    "关键质量绝不妥协",
                    "口头禅：'这里用最好的，其他地方帮我省点'"
                ],
                companies: "套餐整装公司(监理加强)、平台整合型(监理加强)",
                pitfalls: "过度简配风险、隐蔽工程隐患",
                keyFocus: [
                    "核心项目成本拆解 & 对标价值",
                    "关键节点的强制检查 & 工艺细节标准",
                    "材料抽检权与违约处罚"
                ],
                report: "根据您的选择，您同时具备理智务实型和品质严控型特质。您在关键质量环节非常重视，但在非核心部分注重节约。建议您选择工艺透明的高端施工团队，重点关注核心项目成本拆解 & 对标价值，同时注意关键节点的强制检查 & 工艺细节标准，确保在预算内实现可靠品质。"
            },
            "BC": {
                dimension: "视觉+省心",
                persona: "甩手美学总监",
                characteristics: [
                    "大事不糊涂，小事不想管",
                    "施工群免打扰",
                    "好看就行，尽量别烦我",
                    "口头禅：'不好看你负责，别让我操心'"
                ],
                companies: "套餐整装公司(设计升级)、高端全案公司",
                pitfalls: "过度营销包装、服务响应衰减",
                keyFocus: [
                    "设计沟通效率与服务人员稳定性",
                    "方案落地保障与预案沟通",
                    "项目进度可视化管理工具"
                ],
                report: "根据您的选择，您同时具备视觉导向型和省心便利型特质。您重视设计效果和服务体验，愿意为高品质服务投入。建议您选择高端全案设计公司，重点关注设计沟通效率与服务人员稳定性，同时注意方案落地保障与预案沟通，确保获得满意的整体体验。"
            },
            "BD": {
                dimension: "视觉+品质",
                persona: "完美主义颜空",
                characteristics: [
                    "效果要惊艳，别让我操心",
                    "为理想效果不怕花钱不怕等",
                    "要么做到极致，要么别做",
                    "口头禅：'不对，重来'"
                ],
                companies: "高端全案公司、设计+施工+软装组合",
                pitfalls: "进口材料物流延迟、特殊工艺成本失控",
                keyFocus: [
                    "节点验收与效果核验标准",
                    "特殊工艺的工匠资源 & 样品确认",
                    "进口材料交付保障 & 替代预案成本"
                ],
                report: "根据您的选择，您同时具备视觉导向型和品质严控型特质。您对设计效果和工艺质量都有极高要求，追求完美。建议您选择高端设计工作室，重点关注节点验收与效果核验标准，同时注意特殊工艺的工匠资源 & 样品确认，确保设计效果和工艺质量都达到您的标准。"
            },
            "CD": {
                dimension: "省心+品质",
                persona: "钞能力大佬",
                characteristics: [
                    "专业人办专业事",
                    "花钱买省心还要买安心",
                    "验收只看结果不问过程",
                    "口头禅：'钱不是问题，结果要完美'"
                ],
                companies: "高端全案公司、设计+施工+软装组合",
                pitfalls: "服务人员道德风险、验收标准差异",
                keyFocus: [
                    "公司背书与团队实名责任制",
                    "内控体系完备性与关键流程文件",
                    "标准化验收工具（清单/仪器）与客户签字权"
                ],
                report: "根据您的选择，您同时具备省心便利型和品质严控型特质。您重视省心服务和高品质结果，愿意为可靠品质投入。建议您选择高端全案公司，重点关注公司背书与团队实名责任制，同时注意内控体系完备性与关键流程文件，确保获得省心又高品质的装修体验。"
            }
        };
        
        // 应用状态
        const state = {
            currentQuestion: 0,
            answers: Array(20).fill().map(() => []),
            scores: { A: 0, B: 0, C: 0, D: 0 }
        };
        
        // DOM元素
        const pages = {
            instructions: document.getElementById('instructions-page'),
            test: document.getElementById('test-page'),
            results: document.getElementById('results-page')
        };
        
        const startTestBtn = document.getElementById('start-test-btn');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const restartBtn = document.getElementById('restart-btn');
        const questionText = document.getElementById('question-text');
        const optionsContainer = document.getElementById('options-container');
        const progressText = document.getElementById('progress-text');
        const progressFill = document.getElementById('progress-fill');
        const personaDisplay = document.getElementById('persona-display');
        const dimensionElement = document.getElementById('dimension');
        const characteristicsElement = document.getElementById('characteristics');
        const companiesElement = document.getElementById('companies');
        const pitfallsElement = document.getElementById('pitfalls');
        const keyFocusElement = document.getElementById('key-focus');
        const reportTextElement = document.getElementById('report-text');
        const chartContainer = document.querySelector('.chart-container');
        
        // 页面导航
        function showPage(pageId) {
            Object.values(pages).forEach(page => {
                page.classList.remove('active-page');
            });
            setTimeout(() => {
                document.getElementById(pageId + '-page').classList.add('active-page');
            }, 10);
        }
        
        // 更新题目显示
        function updateQuestion() {
            questionText.textContent = questions[state.currentQuestion];
            
            // 清空选项容器
            optionsContainer.innerHTML = '';
            
            // 添加新选项
            options[state.currentQuestion].forEach(option => {
                const optionElement = document.createElement('div');
                optionElement.className = 'option-card';
                if (state.answers[state.currentQuestion].includes(option.value)) {
                    optionElement.classList.add('selected');
                }
                optionElement.dataset.value = option.value;
                
                optionElement.innerHTML = `<span>${option.text}</span>`;
                
                optionElement.addEventListener('click', () => {
                    toggleOption(option.value);
                });
                
                optionsContainer.appendChild(optionElement);
            });
            
            // 更新进度
            progressText.textContent = `${state.currentQuestion + 1}/20`;
            progressFill.style.width = `${((state.currentQuestion + 1) / 20) * 100}%`;
            
            // 更新按钮状态
            prevBtn.disabled = state.currentQuestion === 0;
        }
        
        // 切换选项选择
        function toggleOption(value) {
            const currentAnswers = state.answers[state.currentQuestion];
            const index = currentAnswers.indexOf(value);
            
            if (index === -1) {
                if (currentAnswers.length < 3) {
                    currentAnswers.push(value);
                }
            } else {
                currentAnswers.splice(index, 1);
            }
            
            // 更新UI
            updateQuestion();
        }
        
        // 导航到下一题
        function nextQuestion() {
            if (state.answers[state.currentQuestion].length === 0) {
                alert('请至少选择一个选项');
                return;
            }
            
            if (state.currentQuestion < questions.length - 1) {
                state.currentQuestion++;
                updateQuestion();
            } else {
                calculateResults();
                showPage('results');
            }
        }
        
        // 导航到上一题
        function prevQuestion() {
            if (state.currentQuestion > 0) {
                state.currentQuestion--;
                updateQuestion();
            }
        }
        
        // 计算测评结果
        function calculateResults() {
            // 重置分数
            state.scores = { A: 0, B: 0, C: 0, D: 0 };
            
            // 计算每个维度的得分（每题每个选项加5分）
            state.answers.forEach(answerSet => {
                answerSet.forEach(answer => {
                    if (state.scores[answer] !== undefined) {
                        state.scores[answer] += 5;
                    }
                });
            });
            
            // 将分数转换为数组并排序
            const scoresArray = Object.entries(state.scores)
                .map(([type, score]) => ({ type, score }))
                .sort((a, b) => b.score - a.score);
            
            const [S1, S2, S3] = scoresArray;
            
            // 确定结果类型
            let resultData;
            
            // 应用匹配规则
            if (S1.score - S2.score >= 15) {
                // 单一类型
                resultData = typeDescriptions[S1.type];
            } else if (S2.score - S3.score >= 15) {
                // 组合类型
                const comboKey = [S1.type, S2.type].sort().join("");
                resultData = comboDescriptions[comboKey];
            } else {
                // 纠结型
                resultData = {
                    dimension: "综合纠结型",
                    persona: "完美主义选择困难者",
                    characteristics: [
                        "对各种因素都很重视",
                        "难以做出最终选择",
                        "希望各方面都达到理想状态",
                        "口头禅：'我再想一下'"
                    ],
                    companies: "测评工具已经帮不了你，建议选择人工服务",
                    pitfalls: "测评工具已经帮不了你，建议选择人工服务",
                    keyFocus: [],
                    report: "您的装修决策风格较为复杂，难以通过单一维度进行归类。这种情况可能意味着您在装修决策中面临多重需求冲突或难以取舍。建议您联系我们的专业顾问进行一对一分析，为您提供个性化解决方案。"
                };
            }
            
            // 显示人设
            personaDisplay.textContent = resultData.persona;
            dimensionElement.textContent = resultData.dimension;
            
            // 更新人物特征
            characteristicsElement.innerHTML = '';
            resultData.characteristics.forEach(feature => {
                const li = document.createElement('li');
                li.textContent = feature;
                characteristicsElement.appendChild(li);
            });
            
            // 显示公司和雷区
            companiesElement.textContent = resultData.companies;
            pitfallsElement.textContent = resultData.pitfalls;
            
            // 显示考察重点
            keyFocusElement.innerHTML = '';
            resultData.keyFocus.forEach(focus => {
                const li = document.createElement('li');
                li.textContent = focus;
                keyFocusElement.appendChild(li);
            });
            
            // 显示报告
            reportTextElement.textContent = resultData.report;
            
            // 显示图表容器
            chartContainer.style.display = 'flex';
            
            // 渲染柱形图
            renderBarChart();
        }
        
        // 渲染柱形图
        function renderBarChart() {
            const ctx = document.getElementById('bar-chart').getContext('2d');
            
            // 维度名称和对应的中文标签
            const dimensionLabels = {
                'A': '理智务实型',
                'B': '视觉导向型',
                'C': '省心便利型',
                'D': '品质严控型'
            };
            
            // 颜色配置
            const backgroundColors = [
                'rgba(76, 175, 80, 0.7)',
                'rgba(33, 150, 243, 0.7)',
                'rgba(156, 39, 176, 0.7)',
                'rgba(255, 152, 0, 0.7)'
            ];
            
            const borderColors = [
                'rgba(46, 125, 50, 1)',
                'rgba(25, 118, 210, 1)',
                'rgba(123, 31, 162, 1)',
                'rgba(245, 124, 0, 1)'
            ];
            
            // 准备数据
            const labels = Object.entries(dimensionLabels).map(([key, label]) => label);
            const data = [
                state.scores.A,
                state.scores.B,
                state.scores.C,
                state.scores.D
            ];
            
            // 销毁之前的图表实例（如果存在）
            if (window.barChart) {
                window.barChart.destroy();
            }
            
            window.barChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: '得分',
                        data: data,
                        backgroundColor: backgroundColors,
                        borderColor: borderColors,
                        borderWidth: 1,
                        borderRadius: 6,
                        hoverBackgroundColor: backgroundColors.map(color => color.replace('0.7', '0.9'))
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    indexAxis: 'y', // 横向柱形图，更适合移动设备
                    scales: {
                        x: {
                            beginAtZero: true,
                            max: Math.max(...data, 80), // 确保最大值足够显示所有数据
                            grid: {
                                display: true,
                                color: 'rgba(0, 0, 0, 0.05)'
                            },
                            ticks: {
                                font: {
                                    size: window.innerWidth < 480 ? 10 : 12
                                }
                            }
                        },
                        y: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                font: {
                                    size: window.innerWidth < 480 ? 11 : 13,
                                    weight: 'bold'
                                }
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `${context.dataset.label}: ${context.raw}分`;
                                }
                            }
                        }
                    }
                }
            });
        }
        
        // 事件监听
        startTestBtn.addEventListener('click', () => {
            state.currentQuestion = 0;
            state.answers = Array(20).fill().map(() => []);
            state.scores = { A: 0, B: 0, C: 0, D: 0 };
            updateQuestion();
            showPage('test');
        });
        
        nextBtn.addEventListener('click', nextQuestion);
        
        prevBtn.addEventListener('click', prevQuestion);
        
        restartBtn.addEventListener('click', () => {
            // 重置状态
            state.currentQuestion = 0;
            state.answers = Array(20).fill().map(() => []);
            state.scores = { A: 0, B: 0, C: 0, D: 0 };
            
            // 回到测试说明页面
            showPage('instructions');
        });
        
        // 初始化应用
        window.onload = function() {
            // 初始隐藏图表容器
            chartContainer.style.display = 'none';
        };
        
        // 窗口大小变化时重新渲染柱形图
        window.addEventListener('resize', function() {
            if (window.barChart) {
                renderBarChart();
            }
        });
    </script>
</body>
</html>